<div if="isDisplayed()" class="payment-option _collapsible opc-payment-additional reward-points"
     data-bind="mageInit: {'collapsible':{'openedState': '_active','active': '2'}}">
    <div class="payment-option-title field choice" data-role="title">
        <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
            <!-- ko i18n: 'Reward points'--><!-- /ko -->
        </span>
    </div>
    <div class="payment-option-content" data-role="content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <!-- ko ifnot: isCustomerLoggedIn() -->
        <div class="payment-option-inner">
            <div class="field"><!-- ko i18n: 'Please login for use reward points'--><!-- /ko --></div>
        </div>
        <!--/ko-->
        <!-- ko if: isCustomerLoggedIn() -->
        <form class="form form-reward-points" id="reward-points-form" data-bind="blockLoader: isLoading" method="post">
            <div class="actions-toolbar">
                <label class="label" for="">
                    <!-- ko ifnot: isApplied() -->
                        <span data-bind="text: getAvailablePointsText()"></span>
                    <!-- /ko -->
                    <!-- ko if: isApplied() -->
                        <span data-bind="text: getUsedPointsText()"></span>
                    <!-- /ko -->    
                </label>
                <div class="payment-reward-spending-content" data-role="content">
                    <div id="rewardpoints-slider-container" >
                        <!-- <span data-bind="text:getPointsText()"></span> -->
                        <input data-bind="spendingPoint" id="range_reward_point" type="text">
                        <div class="input-point">
                        <span> <!-- ko i18n: 'You will spend'--><!-- /ko -->
                            <input
                                data-bind="attr:{'data-oldval':oldval()},value:usePoint(),event:{ change: function() { changSpendingPoint() }}"
                                type="text" class="input-text"
                                data-oldval=""
                                id="reward_sales_point" name="reward_sales_point">
                            <!-- ko i18n: 'Points'--><!-- /ko -->
                        </span>
                        </div>
                        <div class="input-max">
                            <input
                                    data-bind="checked:checkedMax(),event:{ change:function() { maxSpendingPoint() } }"
                                    type="checkbox" id="reward_max_points_used">
                            <label for="reward_max_points_used">
                                <!-- ko i18n: 'Maximize my discount with points'--><!-- /ko -->
                            </label>
                        </div>
                    </div>
                </div>
                <div class="primary">
                    <!-- ko ifnot: isApplied() -->
                        <a class="action action-apply" type="submit" data-bind="'value': $t('Use reward points'), click: apply">
                            <span><!-- ko i18n: 'Use reward points'--><!-- /ko --></span>
                        </a>
                    <!-- /ko -->
                    <!-- ko if: isApplied() -->
                        <a class="action action-cancel" type="submit" data-bind="'value': $t('Remove reward points'), click: remove">
                            <span><!-- ko i18n: 'Remove reward points'--><!-- /ko --></span>
                        </a>
                    <!-- /ko -->
                </div>
            </div>
        </form>
        
        <!--/ko-->
    </div>
</div>